<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>二次元新世界</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width,initial-scale=1"/>
	<link rel="stylesheet" href="xw7.css">
</head>
<body>
	<header>
		<a href="#" class="logo">
			<img src="logo.jpg" alt="回到首页" width="40px" height="40px"/>
			<span>新世界</span>
		</a>
		<nav>
			<ul>
				<li><a href="" >首页</a></li>
				<li><a href="" >最新活动</a></li>
				<li><a href="" >项目介绍</a></li>
				<li><a href="" >爱心社区</a></li>
				<li><a href="" >关于我们</a></li>
			</ul>
		</nav>
		<a href="" class="login">
			<img src="login.jpg" alt="登录"/>
			<span>登录</span>
		</a>
	</header>
	<main>
		<section>
			<figure class="home-banner">
				<img src="banner.jpg" class="banner-pic" alt="新时代，新生活" width="100%"/>
				<figcaption class="banner-wrap">
					<h1>Time of new life</h1>
					<p>新时代，年轻的人们让我们一起体验新生活，享受新生活</p>
					<a href="" target="_blank">开始体验</a>
				</figcaption>
			</figure>
		</section>
		<section>
			<ul class="service">
				<li>
					<img src="list1.jpg" class="service-pics" width="50px" height="50px"/>
					<p class="service-border">打造全新世界观，让你<br/>更爱你的生活<p>
				</li>
				<li>
					<img src="list2.jpg" class="service-pics" width="50px" height="50px"/>
					<p class="service-border">丰富多彩的公益活动，发挥<br/>新世界的主人公意识<p>
				</li>
				<li>
					<img src="list3.jpg" class="service-pics" width="50px" height="50px"/>
					<p class="service-border">时尚的新理念，超前<br/>体验未知的生活<p>
				</li>
				<li>
					<img src="list4.jpg" class="service-pics" width="50px" height="50px"/>
					<p>完善的培养机制，帮助<br/>每一步都走的出彩<p>
				</li>
			</ul>
		</section>
		<section class="about-new-world">
			<img src="logo2.jpg" width="80px" height="80px"/>
			<p class="about-title">关于新世界，你不知道的还有什么？</p>
		</section>
		<section class="search-activity">
			<div class="bg-image"></div>
			<div class="search-wrap">
				<h3>查找新世界城市活动信息</h3>
				<p>每个城市有不同的活动信息，请自主查询您所需要了解的城市</p>
				<form class="select-city" action="" method="get">
						<div class="parent">
							<label class="select">
								<input list="countrys" placeholder="国家"/>
								<datalist  id="countrys">
									<option value="中国">
									<option value="美国">
									<option value="俄罗斯">
									<option value="日本">
									<option value="英国">
									<option value="法国">
									<option value="德国">
									<option value="印度">
									<option value="澳大利亚">
									<option value="加拿大">
									<option value="意大利">
									<option value="韩国">
								</datalist>
							</label>
						</div>
						<div class="parent">
							<label class="select">
								<input list="province" placeholder="省份"/>
								<datalist  id="province">
									<option value="安徽省">
									<option value="北京市">
									<option value="上海市">
									<option value="广东省">
									<option value="江苏省">
									<option value="浙江省">
									<option value="山东省">
									<option value="湖北省">
									<option value="辽宁省">
									<option value="新疆维吾尔族自治区">
									<option value="陕西省">
									<option value="内蒙古自治区">
								</datalist>
							</label>
						</div>
						<div class="parent">
							<label class="select">
								<input list="city" placeholder="城市"/>
								<datalist  id="city">
									<option value="合肥市">
									<option value="芜湖市">
									<option value="安庆市">
									<option value="阜阳市">
									<option value="蚌埠市">
									<option value="马鞍山市">
									<option value="滁州市">
								</datalist>
							</label>
						</div>
						<div>
							<label>
								<button name="search" class="butt" value="search">搜索</button>
							</label>
						</div>
				</form>
			</div>
		</section>
		<section>
			<div class="acti-gall">
				<figure class="pic beijing">
					<img src="beijing.jpg" alt="北京活动"/>
					<figcaption>
						<h4>北京活动</h4>
						<p>新社区大联盟</p>
					</figcaption>
				</figure>
				<figure class="pic shanghai">
					<figcaption>
						<h4 id="shanghai-acti">上海活动</h4>
						<p>夜上海新景观探索</p>
					</figcaption>
					<img src="shanghai.jpg" alt="上海活动"/>
				</figure>
				<figure class="pic shenzhen">
					<img src="shenzhen.jpg" alt="深圳活动"/>
					<figcaption>
						<h4>深圳活动</h4>
						<p>全新海岸线观点站</p>
					</figcaption>
				</figure>
				<figure class="pic hongkong">
					<img src="hongkong.jpg" alt="香港活动"/>
					<figcaption>
						<h4>香港活动</h4>
						<p>奢侈消费大派送</p>
					</figcaption>
				</figure>
			</div>
		</section>

		<section class="new-about">
			<div class="td about-wrap">
				<img src="timg.jpg" width="100%"/>
				<div class="about-banner">
					<p><span>新世界</span></p>
					<h3>TIME</h3>
					<p>@新世界-北京</p>
					<p>2017.04.12</p>
				</div>
			</div>
			<div class="td col1 about-intro">
				<input type="radio" name="selec-page" checked class="selec-page selec1"/>
				<div class="page page1">
					<h3>新世界/<span>01</span></h3>
					<p>这是第一个新世界新世界是一世界新世界是一个新世界新世界是一个新世界
					新世界是一个新世界新世界是一世界新世界是一个新世界</p>
					<a href="" class="page-more more1">更多详情</a>
				</div>
				<input type="radio" name="selec-page" class="selec-page selec2"/>
				<div class="page page2">
					<h3>新世界/<span>02</span></h3>
					<p>这是第二个新世界新世界是一世界新世界是一个新世界新世界是一个新世界
					新世界是一个新世界新世界是一世界新世界是一个新世界</p>
					<a href="" class="page-more more2">更多详情</a>
				</div>
				<input type="radio" name="selec-page" class="selec-page selec3"/>
				<div class="page page3">
					<h3>新世界/<span>03</span></h3>
					<p>这是第三个新世界新世界是一世界新世界是一个新世界新世界是一个新世界
					新世界是一个新世界新世界是一世界新世界是一个新世界</p>
					<a href="" class="page-more more3">更多详情</a>
				</div>
			</div>
		</section>
		<section class="new-about">
			<div class="td col1 about1">
				<p><span>新时代<br/>关于爱生活的我们</span>
					<a href="">查看更多</a>
				</p>
			</div>
			<div class="td col1 about2">
				<p><span>新时代<br/>关于爱生活的我们</span>
					<a href="">查看更多</a>
				</p>
			</div>
			<div class="td col1 about3">
				<img src="travel.jpg" width="100%"/>
				<div class="next-tria"></div>
			</div>
		</section>
		<section class="join">
			<div class="join-banner">
				<h3>成为我们的志愿者</h3>
				<p>新时代的大家庭需要每一个爱生活的人加入，如果够年轻，有梦想，有激情<br/>
					那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
			</div>
			<div class="join-main">
				<ul class="join-known">
					<li>
						<h3>新世界志愿者协议</h3>
						<p>加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则......</p>
						<a href="" class="known-more"><span>></span>more</a>
					</li>
					<li>
						<h3>新世界志愿者权力</h3>
						<p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在城市新世界活动的优先参与资格</p>
						<a href="" class="known-more"><span>></span>more</a>
					</li>
					<li>
						<h3>更多条款</h3>
						<a href="" class="known-more"><span>></span>more</a>
					</li>
				</ul>
				<form action="" method="get" class="join-reser">
					<label id="name">
						<input type="text" name="name" class="pers-input"/>
					</label>
					<label id="age">
						<input type="text" name="age" class="pers-input"/>
					</label>
					<label id="tel">
						<input type="text" name="tel" class="pers-input"/>
					</label>
					<label id="address">
						<input type="text" name="address" class="pers-input"/>
					</label>
					<textarea name="" class="pers-texare" placeholder="请简单描述您梦想的生活：" rows="" cols=""></textarea>
					<button class="butt">提交申请</button>
				</form>
			</div>
		</section>
		<section class="contact">
			<h3>联系我们</h3>
			<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯</p>
			<p>也可以通过以下任何方式关注我们的动态</p>
			<form action="" method="get">
				<label id="pers-email">
					<input type="email" placeholder="someone@email.com"/>
					<button class="email-sub">提交</button>
				</label>
			</form>
			<ul class="watch-us">
				<li>
					<a href="">
						<img src="qq.jpg" alt="QQ" width="30px" height="30px"/>
					</a>
				</li>
				<li>
					<a href="">
						<img src="weibo.jpg" alt="微博" width="30px" height="30px"/>
					</a>
				</li>
				<li>
					<a href="">
						<img src="feixin.jpg" alt="飞信" width="30px" height="30px"/>
					</a>
				</li>
				<li>
					<a href="">
						<img src="web.jpg" alt="网站" width="30px" height="30px"/>
					</a>
				</li>
			</ul>
		</section>
	</main>
	<footer>
		<span>@2016新世界</span>
		<a class="back-top" href="">Back to top</a>
	</footer>
</body>
</html>